<template>
	<div>
		这里是about page <router-link to='/'>返回index</router-link>
		<div>信息：{{msg}}</div>
		<div>{{$store.state.msg}}</div>
		<div>
			<input type="text" v-model="msgUser"><button @click='orderBtn'>确定</button>
		</div>
		<div class="list">
			<div class="item">
				<img src="@/assets/logo.png" class="logo-icon" alt="">item1
				<input type="text" placeholder="请输入item1">
			</div>
			<div class="item">
				<img src="@/assets/logo.png" class="logo-icon" alt="">item2
				<input type="text" placeholder="请输入item2">
			</div>
			<div class="item">
				<img src="@/assets/logo.png" class="logo-icon" alt="">item3
				<input type="text" placeholder="请输入item3">
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters,mapActions} from 'vuex'
	export default {
		name:'about',
		data:function(){
			return {
				msgUser:"",
			}
		},
		methods:{
			...mapActions(['changeMsg']),
			orderBtn(){
				this.changeMsg(this.msgUser)
			}
		},
		computed:{...mapGetters(['msg'])},
	}
</script>

<style lang="scss">
	.list{
		margin-top: 10px;
		.item{margin-bottom: 5px;
			@include displayFlex();
			input{
				@include placeholder(#999)
			}
		}
		.logo-icon{width: 20px;height:20px;@include opacity(.75);}
	}
</style>
